<template>
  <div>
    <!-- 自定义指令
    指令：标签上的一个属性  v-if  v-text
    全局自定义指令
       Vue.directive('指令名',{
          指令的生命周期
           bind:绑定时（类似于beforeMount）
           *inserted:指令所在标签添加到父节点时执行(类似于mounted)
           update:指令所在组件有更新，但不保证指令所在标签更新完成
           *componentUpdated:指令所在组件有更新，且更新完成包括子组件也更新完成，类似于updated
           unbind:解绑，类似destroyed   指令所在标签销毁时执行（v-if=false  ,组件销毁）
           inserted(dom,obj,vnode){
            *dom:指令所在标签dom
            obj:{
              属性名
              修饰符
              *值:value
            }
            vnode:虚拟dom节点信息，它内部包含指令所在组件的this(context：指令所在组件的this)
           }
       })
        使用
          <div v-指令名:属性名.修饰符='值'>xxx</div>
          <div v-on:keyup.enter="fn">xxx</div>
    局部自定义指令
      directives:{
         指令名:{
          指令的生命周期
         }
      }
    -->
    <!-- 需求：类似v-text -->
    <div v-if="bol" v-hmtext="msg" />
    <button @click="setMsg">修改msg</button>
    <button @click="bol=false">修改bol</button>

  </div>
</template>
<script>
function fn() {
  console.log('点击了')
}
export default {
  name: 'Home',
  directives: {
    hmtext: {
      inserted(dom, obj) {
        dom.innerText = obj.value
        document.addEventListener('click', fn)
      },
      componentUpdated(dom, obj) {
        dom.innerText = obj.value
      },
      unbind() {
        document.removeEventListener('click', fn)
      }
    }
  },
  data() {
    return {
      msg: 'hello',
      bol: true
    }
  },
  methods: {
    setMsg() {
      this.msg = Date.now()
      console.log('msg', this.msg)
    }
  }

}
</script>
<style>
</style>
